<template>
    <div id="pointExchange">
        <div class="navbar">
            <div class="icon" @click="goBack">
                <i class="iconfont">&#xe72d;</i>
            </div>
            积分兑换
        </div>
        <div class="top-box">
            <div class="top-box-content">
                <div class="coin">
                    <div class="title">我的积分</div>
                    <span class="num">{{game_point}}</span>
                </div>
                <div class="point">
                    <div class="title">我的游币</div>
                    <span class="num">{{game_coin}}</span>
                </div>
            </div>
        </div>
        <div class="change-box">
            <div class="title">
                兑换游币
                <span>兑换比例 100积分=1游币</span>
            </div>
            <div class="input">
                <input type="number" placeholder="输入积分数量" v-model="exchangePoint" @keyup="watchPoint">
            </div>
        </div>
        <div class="btn" @click="exchange_icon">立即兑换</div>
        <p class="notice">注：最低500积分起兑换</p>
    </div>
</template>

<script>
    import { mapState,mapMutations} from 'vuex'
    import {getUserInfo} from 'api/game_box'
    import {exchange} from 'api/game_box'
    import { Toast } from 'vant';
    export default {
        data(){
            return{
                game_coin:'',
                game_point:'',
                exchangePoint:''
            }
        },
         computed:{
             ...mapState(['loginInfo','userInfo'])
        },
        created(){
          this.init(); 
        },
        methods:{
            goBack(){
               if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            },
            exchange_icon(){
                if(!this.exchangePoint){
                    Toast('请输入积分数量!');
                    return;
                }
                exchange(this.exchangePoint).then(res=>{
                    if(res.data.error==0){
                        Toast({
                            message: res.data.msg,
                            duration:1000
                        });
                        this.init();
                    }
                })
            },
            init(){
                let userid=this.loginInfo.userid||this.loginInfo.id;
                if(userid){
                    getUserInfo(userid).then(res=>{
                        if(res.data.error==0){
                            res=res.data.content;
                            this.game_point=res.game_point;
                            this.game_coin=res.game_coin;
                            this.SET_LOGININFO(res);
                            this.SET_USERINFO(res);
                        }
                    })
                }
            },
            watchPoint(){
               parseInt(this.exchangePoint)>parseInt(this.game_point)?this.exchangePoint=parseInt(this.game_point):'';
            },
            ...mapMutations(['SET_USERINFO','SET_LOGININFO'])
            
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
.navbar{
    position: fixed;
    top:0;
    z-index:99;
    width:7.5rem;
    left:50%;
    transform: translateX(-50%);
    height:0.8rem;
    line-height:0.8rem;
    color:#fff;
    text-align: center;
    font-size:$font-size-l;
    color:#F2F2F2;
    .icon{
        position:absolute;
        top:0;
        left:0;
        .iconfont{
            padding:0 0.2rem;
            font-size:0.4rem;
            color:#fff;
        }
    }
}
.top-box{
    width:7.5rem;
    height:3.97rem;
    background:#14a9f9;
    padding-top:1rem;
    .top-box-content{
        position:relative;
        display:flex;
        margin:0 auto;
        padding:.2rem;
        width:6.75rem;
        height:1.8rem;
        background:#fff;
        border-radius:.2rem;
        &::before{
            content:'';
            position:absolute;
            width:1px;
            height:1.4rem;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            background:#ddd;
        }
        .title{
            position:relative;
            padding-left:.4rem;
            font-size:.24rem;
            color:#606060;
        }
        .num{
            padding-top:.1rem;
            text-align: center;
            font-size:.66rem;
            color:#333;
        }
        .point{
            flex:1;
            display:flex;
            flex-direction: column;
            padding-left:.2rem;
            .title{
                &::before{
                    content:'';
                    position:absolute;
                    top:0;
                    left:0;
                    width:.29rem;
                    height:.29rem;
                    @include bg-image('../../assets/image/icon_yb');
                    background-size:100% 100%;
                    background-repeat: no-repeat;

                }
            }
        }
        .coin{
            flex:1;
            display:flex;
            flex-direction: column;
            padding-left:.2rem;
            .title{
                &::before{
                    content:'';
                    position:absolute;
                    top:0;
                    left:0;
                    width:.29rem;
                    height:.29rem;
                    @include bg-image('../../assets/image/icon_jf');
                    background-size:100% 100%;
                    background-repeat: no-repeat;
                }
            }
        }
    }
}

.change-box{
    position:relative;
    top:-.8rem;
    margin:0 auto;
    padding:.6rem;
    width:6.96rem;
    height:2.99rem;
    @include bg-image('../../assets/image/change_box');
    background-size:100% 100%;
    background-repeat: no-repeat;
    .title{
       font-size:.32rem;
       color:#121212;
       span{
           font-size:.2rem;
           color:#999;
       } 
    }
    .input{
        margin-top:.4rem;
        height:.8rem;
        line-height:.8rem;
        input{
            padding:0 .2rem;
            width:100%;
            border:none;
            background:#f6f6f6;
            font-size:.24rem;
            color:#9f9f9f;
        }
    }
}
.btn{
    width:3.74rem;
    height:.75rem;
    margin:0 auto;
    line-height:.75rem;
    background:#14a9f9;
    text-align: center;
    color:#fff;
    border-radius:.375rem;
    font-size:.26rem;
}
.notice{
    margin-top:.2rem;
    text-align: center;
    font-size:.24rem;
    color:#9f9f9f;
}
</style>